<template>
  <div class="activity">
    <!-- banner -->
    <div class="banner_about">
      <div>市场活动</div>
    </div>
    <!-- 内容 -->
    <div class="activity_container">
      <div class="cont">
        <div class="left">
          <h1>"英联旺财，莺春起舞"活动回馈</h1>
          <p>莺初解语，春草渐绿，正所谓“一年之计在于春”，在春天万物复苏，生意盎然的季节，UKD英联国际为答谢长久以来新老客户的支持与信任，特推出“英联旺财，莺春起舞”回馈活动，活动奖品和规则如下...</p>
          <div class="labels">
            <span><img src="./images/red.png" alt=""></span>
            <span><img src="./images/fxdj.png" alt=""></span>
            <span><img src="./images/active.png" alt=""></span>
          </div>
          <div class="line"></div>
          <p class="time">时间: 2018年03月15日-2018年06月15日</p>
          <div class="toDetail"><router-link to="/fxup" target="_blank">查看详情</router-link></div>
        </div>
        <div class="right">
          <img src="./images/activefxup.jpg" alt="">
          <div class="trans_mask">已结束</div>
        </div>
      </div>
      <div class="cont">
        <div class="left">
          <h1>金鸡贺岁 新老客户迎大礼</h1>
          <p>客户必须认识外汇交易是含有杠杆的金融交易产品,这些金融产品可能并不适合任何人,您应确保已经非常了解所涉及的投资风险。本活动适用于2016年12月23日或以前开户的老客户和2016年12月...</p>
          <div class="labels">
            <span><img src="./images/red.png" alt=""></span>
            <span><img src="./images/date.png" alt=""></span>
            <span><img src="./images/active.png" alt=""></span>
          </div>
          <div class="line"></div>
          <p class="time">时间: 2016年12月23日-2017年2月28日</p>
          <div class="toDetail"><router-link to="/fxchicken" target="_blank">查看详情</router-link></div>
        </div>
        <div class="right">
          <img src="./images/ji.jpg" alt="">
          <div class="trans_mask">已结束</div>
        </div>
      </div>
      <div class="cont">
        <div class="left">
          <h1>猴年开红包 UKDFX盈门</h1>
          <p>老客户没有存入过任何资金或者新开客户,进行500美元或者以上的存款均可即使获得100美元的增金,平仓交易满10手标准合约后可自由提取。账户没有达到交易手术要求的情况下申请退款，客户...</p>
          <div class="labels">
            <span><img src="./images/red.png" alt=""></span>
            <span><img src="./images/date.png" alt=""></span>
            <span><img src="./images/active.png" alt=""></span>
          </div>
          <div class="line"></div>
          <p class="time">时间: 2016年1月18日-2016年5月31日</p>
          <div class="toDetail"><router-link to="/fxmonkey" target="_blank">查看详情</router-link></div>
        </div>
        <div class="right">
          <img src="./images/hou.jpg" alt="">
          <div class="trans_mask">已结束</div>
        </div>
      </div>
      <div class="cont">
        <div class="left">
          <h1>马尔代夫双人豪华游</h1>
          <p>活动期限内不论新老客户新净入金达到15万美元或以上,3个自然月内的平仓交易手术达到9000手或以上,赠送马尔代夫双人5天旅游套票。所有新老客户都可以参加，但是每个客户只能获得一个活动...</p>
          <div class="labels">
            <span><img src="./images/prize.png" alt=""></span>
            <span><img src="./images/tour.png" alt=""></span>
            <span><img src="./images/active.png" alt=""></span>
          </div>
          <div class="line"></div>
          <p class="time">时间: 2015年6月1日-2015年12月31日</p>
          <div class="toDetail"><router-link to="/fxmaldives" target="_blank">查看详情</router-link></div>
        </div>
        <div class="right">
          <img src="./images/maerdaifu.jpg" alt="">
          <div class="trans_mask">已结束</div>
        </div>
      </div>
      <div class="cont">
        <div class="left">
          <h1>UKDFX参加香港iFX EXPO ASIA金融展会</h1>
          <p>亚洲最大的b2b金融展会将于1月27-29日在区域性金融中心举办。UKDFX有幸参加这场集展览、主题演讲和顶级座谈会于一体的盛会，是一个学习的机会同样也是一个向亚洲市场展示实力的机会...</p>
          <div class="labels">
            <span><img src="./images/meeting.png" alt=""></span>
            <span><img src="./images/world.png" alt=""></span>
            <span><img src="./images/experience.png" alt=""></span>
          </div>
          <div class="line"></div>
          <p class="time">时间: 2015年1月27日-2015年1月29日 08:00-18:00</p>
          <div class="toDetail"><router-link to="/fxhk" target="_blank">查看详情</router-link></div>
        </div>
        <div class="right">
          <img src="./images/hk.jpg" alt="">
          <div class="trans_mask">已结束</div>
        </div>
      </div>
    </div>
    <div class="hold"></div>
  </div>
</template>

<script type="text/ecmascript-6">

</script>

<style scoped>
.activity {
  background-color: #f5f5f5;
}
.activity .banner_about {
  height: 411px;
  width: 100%;
  background: url("../../../static/images/banner_min.jpg") no-repeat;
  overflow: hidden;
}
.activity .banner_about div{
  padding-top:228px;
  width:1085px;
  margin:0 auto;
  font-size: 48px;
  color: #fff;
  box-sizing: border-box;
}
/*主要内容样式*/
.activity .activity_container {
  margin-top: 50px;
  overflow: hidden;
}
.activity .activity_container .cont {
  width: 1190px;
  margin: 0 auto 20px;
  height: 317px;
  background-color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}
.activity .activity_container .cont .left {
  float: left;
  width: 408px;
  height: 100%;
  margin-bottom: 23px;
  margin-left: 20px;
}
.activity .activity_container .cont .right {
  float: right;
  width: 750px;
  height: 274px;
  margin-top: 20px;
  position: relative;
}
.activity .activity_container .cont .right img {
  width: 100%;
  height: 100%;
}
.activity .activity_container .cont .right .trans_mask {
  width: 750px;
  height: 48px;
  background-color: rgba(255,255,255,.6);
  position: absolute;
  bottom: -24px;
  left: 0;
  font-size: 24px;
  color: #111;
  line-height: 48px;
  text-align: center;
}
.activity .activity_container .cont .left h1 {
  font-size: 24px;
  color: #222;
  font-family: "黑体";
}
.activity .activity_container .cont .left p {
  font-size: 16px;
  color: #999;
  letter-spacing: 1px;
  font-family: "黑体";
}
.activity .activity_container .cont .left p.time {
  font-size: 15px;
  color: #666;
}
.activity .activity_container .cont .left .labels {
  margin-top: 14px;
  margin-bottom: 17px;
}
.activity .activity_container .cont .left .line {
  width: 100%;
  height: 1px;
  background-color: #f5f5f5;
  margin-bottom: 14px;
}
.activity .activity_container .cont .left .toDetail {
  width: 408px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  background-color: #ffcc00;
  border-radius: 3px;
}
.activity .activity_container .cont .left .toDetail a {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #111;
  font-size: 18px;
}
.activity .hold {
  height: 100px;
}
a:hover,a:focus {
  text-decoration: none;
}
</style>
